import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import '../css/community.css'
import { Search, Tabs } from 'react-vant';

import Footer from '../component/Footer'

// const items = Array.from({ length: 3 }, (_, i) => i + 1)

export default function Community() {
    let navigate = useNavigate()
    const [value, setValue] = useState('');
    const [active, setActive] = useState(0);
    const listurl=[{name:'精选',url:'/home/community/jing'},{name:'关注',url:'/home/community/guan'},{name:'车队',url:'/home/community/car'}]

    let comjump=(index,item)=>{
        setActive(index)
        navigate(item.url)
    
    }
    return (
        <div className='community_box'>
            <div>
                <Search shape="round" className='community_seach' value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />;

            </div>
            <div>
                <div className='community_dao'>
                    {
                        listurl.map((item, index) => {
                          return <span key={index} className={index==active?'comred':''} onClick={() => { comjump(index,item) }}>{item.name}</span>
                        })
                    }
                </div>
            </div>
            <div>
                <Outlet />
            </div>
            <div>
                <Footer />
            </div>

        </div>
    )
}
